// 正在运行
import React from "react";
import { connect } from "react-redux";
import {
  pandingPushEndAction,
  deleteItemAction
} from "../store/actionCreators";
const Pending = props => {
  const { panding } = props;
  // 选中了
  const handleChange = ({ target }) => {
    // console.log(target.checked);
    // 只有当用户选中的时候我们在提交
    if (target.checked) {
      props.pushEnd(parseInt(target.name));
      console.log(parseInt(target.name));
    }
  };
  // 在正在完成中删除一条
  const handleClick = id => {
    props.deleItem(id);
   
  };
  return (
    <div className="plan-wrap">
      {/* 标题 */}
      <h2 className="plan-title">
        <p>正在进行中</p> <span>{panding.length}</span>
      </h2>
      {/* 列表 */}
      <ul>
        {panding.map(item => {
          return (
            <li key={item.id}>
              <label>
                <input
                  type="checkbox"
                  name={item.id}
                  checked={item.checked}
                  onChange={handleChange}
                />
                <span key={item.id}>{item.text}</span>
              </label>
              <a
                href="###"
                style={{ color: "red" }}
                onClick={() => handleClick(item.id)}
              >
                删
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => {
  return {
    pushEnd(id) {
      dispatch(pandingPushEndAction(id));
    },
    // 从正在进行删除一条
    deleItem(id) {
      dispatch(deleteItemAction(id));
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Pending);
